import type { VueRouter, RouteConfig } from 'vue-router/types/router';
import { clearAllPending } from '@/utils/http';
import { setupLayouts } from 'virtual:generated-layouts';

// 运行时
import NotFound from '@/components/exception/[...404].vue';

// 运行时 + 编译器
// const NotFound = { template: '<div>404</div>' };

import NProgress from 'nprogress';

// 追加的路由
export function createRoutes(routes: RouteConfig[]): RouteConfig[] {
  // 配置 404 页面，并使用 src/layouts/blank.vue 布局显示
  routes.push({ path: '*', name: 'NotFound', component: NotFound, meta: { layout: 'blank' } });
  return setupLayouts(routes);
}

// 路由拦截器
export function createGuard(router: VueRouter) {
  //在跳转路由之前拦截事件
  router.beforeEach((to, from, next) => {
    //唤起Loading进度条，可以换成其他的
    NProgress.start();

    //清除所有无效请求，防止数据污染(结合axios使用)
    clearAllPending();

    const needLogin = Boolean(to.meta?.requiresAuth);
    if (needLogin && !localStorage.getItem('app-token')) {
      // 此路由需要授权，请检查是否已登录，务必 return 返回拦截
      return next({ name: 'login', query: { redirect: to.fullPath } });
    }

    //其他拦截逻辑可以写在这里
    //.....

    //路由放行
    next();
  });

  //在跳转路由之后拦截事件
  router.afterEach(to => {
    if (to.meta?.title) {
      // 改变页面标题
      document.title = to.meta.title as string;
    }
    //关闭Loading进度条，可以换成其他的
    NProgress.done();
  });

  router.onReady(() => {
    console.log('路由已经准备好了');
  });

  router.onError(error => {
    console.log('路由错误', error);
  });
}
